<template>
  <el-form label-position="top">
    <el-form-item label="创新内容与知识产权对应关系汇总" />
  </el-form>
  <vxe-table
    ref="tableRef"
    border
    show-overflow
    :data="tableData"
    :column-config="{ resizable: true }"
    :edit-config="{ trigger: 'click', mode: 'row' }"
  >
    <vxe-column type="seq" width="60" />
    <vxe-column field="content1" title="项目研究预期创新成果" :edit-render="{}">
      <template #edit="{ row }">
        <vxe-input v-model="row.content1" type="text" placeholder="请输入" />
      </template>
    </vxe-column>
    <vxe-column field="content2" title="发明专利数量及名称" :edit-render="{}">
      <template #edit="{ row }">
        <vxe-input v-model="row.content2" type="text" placeholder="请输入" />
      </template>
    </vxe-column>
    <vxe-column
      field="content3"
      title="实用新型专利数量及名称"
      :edit-render="{}"
    >
      <template #edit="{ row }">
        <vxe-input v-model="row.content3" type="text" placeholder="请输入" />
      </template>
    </vxe-column>
    <vxe-column field="content4" title="技术秘密数量及名称" :edit-render="{}">
      <template #edit="{ row }">
        <vxe-input v-model="row.content4" type="text" placeholder="请输入" />
      </template>
    </vxe-column>
    <vxe-column field="content5" title="软件著作权数量及名称" :edit-render="{}">
      <template #edit="{ row }">
        <vxe-input v-model="row.content5" type="text" placeholder="请输入" />
      </template>
    </vxe-column>
    <vxe-column field="content6" title="工法数量及名称" :edit-render="{}">
      <template #edit="{ row }">
        <vxe-input v-model="row.content6" type="text" placeholder="请输入" />
      </template>
    </vxe-column>
    <vxe-column field="other" title="其他" :edit-render="{}">
      <template #edit="{ row }">
        <vxe-input v-model="row.other" type="text" placeholder="请输入" />
      </template>
    </vxe-column>
    <vxe-column field="planEndTime" title="计划完成时间" :edit-render="{}">
      <template #edit="{ row }">
        <vxe-input
          v-model="row.planEndTime"
          type="date"
          placeholder="请选择日期"
          transfer
        />
      </template>
    </vxe-column>
    <vxe-column title="操作" width="80">
      <template #default="{ row }">
        <vxe-button mode="text" status="primary" @click="removeEvent(row)">
          移除
        </vxe-button>
      </template>
    </vxe-column>
  </vxe-table>
  <el-button
    style="margin-top: 20px"
    type="primary"
    :icon="Plus"
    @click="insertEvent"
  >
    增加对应关系
  </el-button>
</template>

<script setup>
  import { Plus } from '@element-plus/icons-vue'
  import { getAllUser } from '@/api/system/user'

  const $baseMessage = inject('$baseMessage')

  const users = ref([])

  const tableRef = ref()

  const tableData = ref([
    {
      content1: '',
      content2: '',
      content3: '',
      content4: '',
      content5: '',
      content6: '',
      other: '',
      planEndTime: '',
    },
  ])

  const getUser = () => {
    getAllUser().then((res) => {
      if (res.code == 0 || res.code == 200) {
        users.value = res.data || []
      }
    })
  }

  const insertEvent = async () => {
    const $table = tableRef.value
    if ($table) {
      const record = {
        content1: '',
        content2: '',
        content3: '',
        content4: '',
        content5: '',
        content6: '',
        other: '',
        planEndTime: '',
      }
      $table.insertAt(record, -1)
    }
  }

  const removeEvent = async (row) => {
    const $table = tableRef.value
    if ($table) {
      $table.remove(row)
    }
  }

  const getFormData = () => {
    const data = tableRef.value.getTableData().tableData
    if (!data.length) {
      $baseMessage('请填写完整的创新内容与知识产权对应关系汇总', 'error')
      return false
    }
    for (let i = 0; i < data.length; i++) {
      for (const key in data[i]) {
        if (!data[i][key]) {
          $baseMessage('请填写完整的创新内容与知识产权对应关系汇总', 'error')
          return false
        }
      }
    }
    return { ipInnovationContentList: data }
  }

  const setFormData = ({ ipInnovationContentList }) => {
    tableData.value = ipInnovationContentList || []
  }

  defineExpose({ getFormData, setFormData })

  getUser()
</script>

<style lang="scss" scoped></style>
